<template>
  <div id="Rerecord" v-show="sel_class !== undefined">
    <div class="block"  style="padding-left: 30px; padding-top: 50px">
      <div>
        <span class="demonstration">选择:</span>
        <el-cascader
          v-model="students_with_call_info.z_t_j"
          :options="options"
          clearable
          @change="handleChange">
        </el-cascader>
        <el-button type="primary" @click="get_call_info">获取所选节次考勤</el-button>
        <el-button type="primary" @click="fix_call_info">修改本次考勤</el-button>
      </div>
      <el-table :data="students_with_call_info"
                style="width: 100%;margin-top: 50px"
                height="950">-
        <el-table-column
          fixed
          prop="id"
          label="id"
          width="150">
        </el-table-column>
        <el-table-column
          prop="u_name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="u_num"
          label="学号"
          width="120">
        </el-table-column>

        <el-table-column label="当前状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="students_with_call_info[scope.$index].s.type">{{students_with_call_info[scope.$index].s.text}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleSetting(scope.$index, scope.row, 0)">出勤</el-button>
            <el-button
              size="mini"
              type="warning"
              @click="handleSetting(scope.$index, scope.row, 1)">迟到</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleSetting(scope.$index, scope.row, 2)">缺勤</el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleSetting(scope.$index, scope.row, 3)">请假</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {zhou} from '../../data'
  import {mapState, mapGetters} from 'vuex'
  export default {
    data() {
      return {
        value: [],
        options: zhou
      }
    },
    computed: {
      ...mapState(['sel_class', 'students_with_call_info'])
    },
    methods: {
      handleChange(value) {
        this.$store.dispatch('change_state_of_call_info_by_z_t_j', {value})
      },
      handleSetting(index, row, s) {
        this.$store.dispatch('change_state_of_call_info', {index, s})
        this.$set(this.$store.state.students_with_call_info, index, row)
      },
      get_call_info() {
        // alert(this.$store.state.sel_course + ' ' + this.$store.state.sel_class)
        this.$store.dispatch('get_called_info')
        // this.$store.dispatch('get_class_member', {class_id, course_id})
      },
      fix_call_info() {
        const b = confirm('确认提交本次考勤吗？')
        if(b) {
          this.$store.dispatch('fix_call_info')
        }
      }
    }
  }
</script>

<style scoped>
  #Rerecord {
    background-color: white;
    height: 1000px;
  }
</style>
